<template>
  <view class="self-wash u-flex-col" style="height: 100%" v-if="show">
    <view class="already-existing" v-if="res" @click="onClickCardDetails(res)">
      <image class="icon" src="https://files.yzsheng.com/client/imgs/vip.png"></image>
      <text>{{ res.formatText }}</text>
      <view class="icon-arrow">
        <u-icon name="play-right-fill" color="#666" size="18"></u-icon>
      </view>
    </view>

    <view class="content">
      <view class="top">
        <view class="left" @click="onScan">
          <u-icon name="scan" size="120" color="#333"></u-icon>
          <view class="text">
            <view class="title"><text>扫码洗车</text></view>
            <view class="desc"><text>启动洗车机</text></view>
          </view>
        </view>
        <image class="img" src="https://files.yzsheng.com/client/imgs/iPhone.png"></image>
      </view>
      <view class="bottom">
        <view class="btn" @click="onPlaceOrder"><text>在线下单</text></view>
        <view class="btn last" @click="onClickInvite"><text>免费洗车</text></view>
      </view>
    </view>
    <view class="tab" v-if="showPage">
      <!-- :class="{one: result[0].data.length <= 0}" -->
      <view class="left" :class="tabs.length === 1 ? 'one' : 'two'">
        <u-tabs-swiper ref="tabs" :list="tabs" :is-scroll="false" :current="current" @change="changeTab"
          active-color="#333" inactive-color="#666" bar-width="120" font-size="28" bg-color="transparent"
          :bar-style="barActiveStyle"></u-tabs-swiper>
      </view>
      <view class="right" @click="onClickMap">
        <text>地图模式</text>
        <i-icon icon="iconditu"></i-icon>
      </view>
    </view>

    <view v-if="carwashcoupons" class="new">
      <view>
        <view>
          <image src="https://files.yzsheng.com/client/index/carwashcoupons/carwashcoupons.png"
            style="width: 612rpx; height: 792rpx"></image>
        </view>
        <view style="
            position: absolute;
            bottom: 130rpx;
            width: 100%;
            margin-left: 27rpx;
          ">
          <view class="ljly" @click="CouponfreeClick">领券免费洗车</view>
        </view>
      </view>
      <view @click="carwashcouponsClick" style="margin-left: 27rpx">
        <image src="https://files.yzsheng.com/client/index/carMaintenance/guanbi.png"
          style="width: 50rpx; height: 50rpx"></image>
      </view>
    </view>
    <view :class="['mask', carwashcoupons ? 'mask-show' : 'mask-hide']" @touchstart="carwashcouponsClick()"></view>
    <u-popup v-model="isShow" mode="center" border-radius="20">
      <view style="width: 600rpx; text-align: center">
        <view style="padding-top: 54rpx; font-weight: bold; font-size: 34rpx">温馨提示</view>
        <view style="font-size: 28rpx; padding: 30rpx 0">
          <view>
            <view>该券仅限于环球中心洗车站使用，洗</view>
            <view>车站地址：环球中心W5区B2;</view>
          </view>
          <view style="font-weight: bold">
            <view>从W区5号入口进B2 — 第一个T字口右</view>
            <view>转 — 到达7迈车西车站</view>
          </view>
        </view>
        <view>
          <image src="https://files.yzsheng.com/client/selfwash/details/map.jpg"
            style="width: 480rpx; height: 290rpx; border-radius: 10rpx" mode="aspectFill"></image>
        </view>
        <view style="line-height: 60rpx; color: #333333">如需帮助请咨询</view>
        <view style="color: #0076ff; margin-bottom: 30rpx" @click="phone">{{
          serviceNumber.number
        }}</view>
        <view style="
            color: #0076ff;
            line-height: 80rpx;
            border-top: 2rpx solid #eeeeee;
          " @click="onScanClick">
          知道了
        </view>
      </view>
    </u-popup>
    <u-modal v-model="showmodal" content="您确定要退出吗？该优惠退出后将不能找回！" :show-confirm-button="true" :show-cancel-button="true"
      confirm-text="是" cancel-text="否" @confirm="showmoClick"></u-modal>
    <u-modal v-model="cardcoupon" content="领取成功，您可以到我的卡券查看" :show-confirm-button="true" :show-cancel-button="true"
      confirm-text="确定" cancel-text="去查看" @confirm="carcancelClick" @cancel="qxcarCancel"></u-modal>
    <u-modal v-model="gongxini" content="您已领取过该卡券，仅限领取一次。" :show-confirm-button="true" :show-cancel-button="true"
      confirm-text="我知道了" cancel-text="去查看" @confirm="IKnow" @cancel="qxcarCancel"></u-modal>
    <u-modal v-model="descObj.show" :content="descObj.content"></u-modal>
    <u-modal v-model="showOrderModal" content="已有订单，是否结束" :show-cancel-button="true" @confirm="setSailJiesuan"
      @cancel="orderDetial"></u-modal>
    <view class="list-box">
      <page-loading :show="showPage" height="100%" mode="show">
        <swiper class="swiper" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
          <block v-if="tabs.length <= 1">
            <swiper-item class="swiper-item" catchtouchmove="stopTouchMove" @touchmove.stop.prevent>
              <scroll-view scroll-y style="height: 100%" @scrolltolower="onreachBottom">
                <car-wash-item v-for="(i, k) in result[1].data" :key="k" :item="i" />
                <view class="loading-status">
                  <u-loadmore :status="result[1].status" />
                </view>
              </scroll-view>
            </swiper-item>
          </block>
          <block v-else>
            <swiper-item class="swiper-item" v-for="(item, index) in tabs" :key="index">
              <scroll-view scroll-y style="height: 100%" @scrolltolower="onreachBottom">
                <car-wash-item v-for="(i, k) in result[tabs.length > 1 ? index : 1].data" :key="k" :item="i" />
                <view class="loading-status">
                  <u-loadmore :status="result[tabs.length > 1 ? index : 1].status" />
                </view>
              </scroll-view>
            </swiper-item>
          </block>
        </swiper>
      </page-loading>
    </view>
    <view class="balloon" v-if="isWashing" @click="orderDetial">
      <view class="scale">{{ washingTime }}</view>
    </view>
  </view>
</template>

<script>
  const dayjs = require("@/utils/dayjs.js");
  import carWashItem from "./components/carWashItem.vue";
  import map from "./static/js/amap-wx.js";
  import {
    getUrlParam
  } from "@/utils/common-api.js";
  let amap = new map.AMapWX({
    key: "5ce5c4ce679c8e0b6a5699824efdd7fb",
  });
  export default {
    components: {
      carWashItem,
    },
    data() {
      return {
        showOrderModal: false,
        descObj: {
          show: false,
          content: "",
        },
        showPage: false,
        current: 0,
        swiperCurrent: 0,
        barActiveStyle: {
          background: "linear-gradient(0deg, #FBB000, #FFE23E)",
        },
        tabs: [{
            name: "我去过的",
          },
          {
            name: "离我最近的",
          },
        ],
        result: [{
            PageIndex: 1,
            PageSize: 20,
            isEnd: false,
            loading: false,
            status: "loading",
            data: [],
          },
          {
            PageIndex: 1,
            PageSize: 20,
            isEnd: false,
            loading: false,
            status: "loading",
            data: [],
          },
        ],
        location: null,
        show: true,
        res: null,
        isLogin: uni.getStorageSync("token") || false,
        carwashcoupons: false, //专项洗车券领取-只针对从商户端二维码识别进入小程序的用户弹出-丁
        isShow: false,
        showmodal: false,
        isWashing: false, //是否在洗车中
        washCardId: "", //进行中的洗车订单信息
        washMachineId: "", //进行中的洗车订单信息
        washingTime: "00:01", //进行中的洗车订单信息
        diffTime: 0, //进行中的洗车订单信息
        washTimer: null, //洗车订单计时器
        cardcoupon: false, //领取卡券成功--丁
        gongxini: false, //已经领取过了的弹框--丁
        yesnoreceive: false, //接收是否领取卡券--丁
        carlistselfservice: [] //获取赠送的接口详情--丁
      };
    },
    onBackPress() {
      let pages = getCurrentPages();
      if (pages.length <= 1) {
        uni.reLaunch({
          url: "/pages/index/index",
        });
        return true;
      }
    },
    computed: {
      serviceNumber() {
        return this.$store.state.serviceNumber;
      },
    },
    onLoad(options) {
      if (uni.getStorageSync("token")) {
        this.$nextTick(() => {
          this.getPageData();
        });
      } else {
        uni.setStorage({
          key: "launchFlag",
          data: false,
        });
        uni.navigateTo({
          url: "/pages_logins/login/login?mode=selfwash",
        });
      }
    },
    onShow() {
      if (!this.showPage && !this.isLogin && uni.getStorageSync("token")) {
        this.getPageData();
      }
      let busstrue = uni.getStorageSync("busstrue") || "";
      if (busstrue) {
        //true商户端进去的用户调用弹框看是否领券
        this.carwashcoupons = true //1弹框，不管是否领取都要弹出
        this.CheckRegisterSelfServiceCarWashCard(); //false没有发显示弹框，true已发放不显示
        // uni.removeStorageSync("busstrue");
        return;
      }
      this.isWashing = false;
      if (this.washTimer) {
        clearInterval(this.washTimer);
      }

      this.hasWashingOrder();
    },

    onHide() {
      this.isWashing = false;
      if (this.washTimer) {
        clearInterval(this.washTimer);
      }
    },

    methods: {
      //专项洗车券关闭-丁
      carwashcouponsClick() {
        this.showmodal = true;
      },
      // 您确定要退出吗？该优惠退出后将不能找回！ 是
      showmoClick(data) {
        this.carwashcoupons = false;
        uni.setStorageSync("showmoButton", true);
      },
      //领券免费洗车
      CouponfreeClick() {
        this.GetMySendCard() //获取赠送的接口详情
        //false没有发，true已发放
        if (this.yesnoreceive) {
          this.carwashcoupons = false
          this.gongxini = true //-----------2已经领取了弹框
        } else {
          this.SendRegisterSelfServiceCarWashCard() //-----2未领取
        }
        uni.removeStorageSync("busstrue");
      },
      IKnow() {
        // 恭喜你已经领取了
        this.gongxini = false
      },
      //去查看
      qxcarCancel() {
        //cardid自助洗车优惠圈的id
        //id:会员卡的id
        //purchase购买途径
        let dataid = this.carlistselfservice.id
        let dataself_Service_Car_Wash_Card_Id = this.carlistselfservice.self_Service_Car_Wash_Card_Id
        let datapurchase_Channel = this.carlistselfservice.purchase_Channel
        uni.navigateTo({
          url: `/pages_userModule/myCoupon/autoWashDetails?id=${dataid}&cardId=${dataself_Service_Car_Wash_Card_Id}&purchase=${datapurchase_Channel}`
        })
        this.cardcoupon = false
      },
      //是否领取卡券
      async CheckRegisterSelfServiceCarWashCard(types) {
        const res = await this.$api.selfServiceCarWash.CheckRegisterSelfServiceCarWashCard()
        this.yesnoreceive = res.data //接收是否领取卡券
      },
      async SendRegisterSelfServiceCarWashCard(types) {
        const res = await this.$api.selfServiceCarWash.SendRegisterSelfServiceCarWashCard()
        this.carwashcoupons = false
        this.cardcoupon = true //领取成功----------3
      },
      //获取赠送的接口详情
      async GetMySendCard() {
        const res = await this.$api.selfServiceCarWash.GetMySendCard()
        this.carlistselfservice = res.data
      },
      //领取成功---确定
      carcancelClick() {
        this.cardcoupon = false
        this.isShow = true //温馨提示 -----------4
      },
      //温馨提示弹框
      onScanClick() {
        this.cardcoupon = false
        this.isShow = false //关闭知道了弹框
      },
      onScanClick() {
        uni.reLaunch({
          url: "/pages/index/index",
        });
      },
      phone() {
        uni.makePhoneCall({
          phoneNumber: this.serviceNumber.number,
        });
      },
      changeTab(index) {
        this.swiperCurrent = index;
      },
      // swiper-item左右移动，通知tabs的滑块跟随移动
      transition(e) {
        let dx = e.detail.dx;
        this.$refs.tabs.setDx(dx);
      },
      // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
      // swiper滑动结束，分别设置tabs和swiper的状态
      animationfinish(e) {
        let current = e.detail.current;
        this.$refs.tabs.setFinishCurrent(current);
        this.swiperCurrent = current;
        this.current = current;
      },
      // 禁用swiper滑动
      stopTouchMove() {
        return false;
      },
      // scroll-view到底部加载更多
      async onreachBottom() {
        let res;
        if (this.tabs.length > 1) {
          if (this.current === 0) {
            res = await this.getHasBeenToCarWashStationList();
            this.addData(res, 0);
          } else {
            res = await this.getSelfServiceCarWashStationList();
            this.addData(res, 1);
          }
        } else {
          res = await this.getSelfServiceCarWashStationList();
          this.addData(res, 1);
        }
      },
      onClickMap() {
        uni.redirectTo({
          url: "/pages_commodity/selfWash/map",
        });
      },
      onPlaceOrder() {
				this.$store.commit('purchaseChannel', false)
        uni.navigateTo({
          url: `/pages_commodity/selfWash/buyMember?jump=back`,
        });
      },
      onClickInvite() {
        uni.showToast({
          icon: "none",
          title: "敬请期待",
        });
        /* uni.navigateTo({
              url: '/pages_commodity/selfWash/carwash_invitation/carwash_invitation'
            }) */
      },
      getPageData() {
        this.getCityId(() => {
          Promise.all([
            this.GetMyFirstCard(),
            this.getHasBeenToCarWashStationList(),
            this.getSelfServiceCarWashStationList(),
          ]).then((data) => {
            if (data[0].code === 200 && data[0].data) {
              let result = data[0].data;
              result.day = dayjs(result.deadline).diff(dayjs(), "day") + 1;
              if (result.card_Type === 1) {
                result.formatText = `月卡会员，剩余${result.day}天`;
              } else if (result.card_Type === 2) {
                result.formatText = `次卡会员，剩余${result.left_Times}次`;
              } else if (result.card_Type === 3) {
                result.left_Seconds = Math.floor(result.left_Seconds / 60);
                result.formatText = `计时会员，剩余${result.left_Seconds}分钟`;
              } else if (result.card_Type === 4) {
                result.formatText = `充值会员，剩余${result.card_Left_Cost}元`;
              }
              this.res = result;
            }
            if (data[1].code === 200 && data[1].data.list.length > 0) {
              this.tabs = [{
                  name: "我去过的",
                },
                {
                  name: "离我最近的",
                },
              ];
              this.addData(data[1], 0);
            } else {
              this.tabs = [{
                name: "离我最近的",
              }, ];
            }
            if (data[2].code === 200) {
              this.addData(data[2], 1);
            }
          });
        });
      },
      // 获取当前定位城市id
      getCityId(callback) {
        this.$commen.getLocation(async (data) => {
          amap.getRegeo({
            location: `${data.lon},${data.lat}`,
            success: (res) => {
              let city = res[0].regeocodeData.addressComponent;
              let adcode = `${city.adcode}`.slice(0, 4);
              adcode += "00";
              this.location = {
                cityId: Number(adcode),
                ...data,
              };
              callback && callback();
            },
            fail: (info) => {
              this.location = {
                cityId: 510100,
                ...data,
              };
              callback && callback();
            },
          });
        });
      },
      async GetMyFirstCard() {
        return await this.$api.selfServiceCarWash.GetMyFirstCard();
      },
      // 获取洗车机状态
      getCarWashStatus(item) {
        return new Promise(async (resolve, reject) => {
          let cell = {
            state: "",
            ...item,
          };
          if (cell.status === 11) {
            cell.state = "repair";
          } else if (cell.status === 13) {
            cell.state = "time";
          } else if (cell.status === 12) {
            cell.state = "maintain";
          }
          try {
            let res = await this.$api.selfServiceCarWash.SetSailGetState({
              op: "getstate",
              id: item.wash_Machine_Id,
            });
            cell = {
              ...cell,
              ...res.data,
            };
            // console.log(cell)
            if (cell.status === 10) {
              if (cell.useflag === "1") {
                cell.state = "busy";
              } else {
                cell.state = "free";
              }
            }
            resolve(cell);
          } catch (e) {
            resolve(cell);
          }
        });
      },
      childMap(item) {
        if (item.selfServiceCarWashMachineList.length !== 0) {
          return new Promise((resolve, reject) => {
            let arr = item.selfServiceCarWashMachineList.map(async (i) => {
              return await this.getCarWashStatus(i);
            });
            Promise.all(arr).then((data) => {
              data.map((i, k) => {
                item.selfServiceCarWashMachineList[k] = i;
                if (k >= data.length - 1) {
                  resolve(data);
                }
              });
            });
          });
        }
      },
      // 获取离我最近的
      getSelfServiceCarWashStationList(type) {
        return new Promise(async (resolve, reject) => {
          let res = this.result[1];
          if (type) {
            res.PageIndex = 1;
            res.isEnd = false;
            res.loading = false;
            this.$set(this.result, 1, res);
          }
          if (res.loading || res.isEnd) {
            return false;
          }
          this.$set(this.result, 1, res);
          let result =
            await this.$api.selfServiceCarWash.GetSelfServiceCarWashStationList({
              pageIndex: this.result[1].PageIndex,
              pageSize: this.result[1].PageSize,
              ...this.location,
            });
          if (result.code === 200 && result.data.list.length > 0) {
            let list = result.data.list;
            let num = 0;
            this.showPage = true;

            list.map(async (item) => {
              // console.log(list,'123')
              item = await this.childMap(item);
              num++;
              if (num >= list.length) {
                result.data.list = list;
                resolve(result);
              }
            });
          } else {
            resolve(result);
          }
        });
      },
      // 获取我去过的
      async getHasBeenToCarWashStationList(type) {
        return new Promise(async (resolve, reject) => {
          let res = this.result[0];
          // console.log(this.result[1])
          if (type) {
            res.PageIndex = 1;
            res.isEnd = false;
            res.loading = false;
          }
          if (res.loading || res.isEnd) {
            return false;
          }
          this.$set(this.result, 0, res);
          let result =
            await this.$api.selfServiceCarWash.GetHasBeenToCarWashStationList({
              pageIndex: this.result[0].PageIndex,
              pageSize: this.result[0].PageSize,
              ...this.location,
            });
          if (result.code === 200 && result.data.list.length > 0) {
            let list = result.data.list;
            let num = 0;
            // console.log(this.result)
            list.map(async (item) => {
              item = await this.childMap(item);

              /* item.map(item2 =>{
                  	this.result[0] = {
                  		...this.result[0],
                  		...item2.mcstate
                  	}
                  }) */
              // console.log(this.result)
              num++;
              if (num >= list.length) {
                result.data.list = list;
                resolve(result);
              }
            });
          } else {
            resolve(result);
          }
        });
      },
      // 计算总共有多少页
      pageCount(totalnum, limit) {
        return totalnum > 0 ?
          totalnum < limit ?
          1 :
          totalnum % limit ?
          parseInt(totalnum / limit) + 1 :
          totalnum / limit :
          0;
      },
      // 添加数据
      addData(res, index, type) {
        let list = this.result[index];
        if (!res) {
          return false;
        }
        let lists = res.data.list;
        if (type) {
          list.data = [];
        }

        if (
          lists.length <= 0 ||
          list.PageIndex >= this.pageCount(res.data.total, list.PageSize)
        ) {
          list.isEnd = true;
          list.status = "nomore";
        }

        if (lists.length > 0) {
          list.data = list.data.concat(lists);
          list.PageIndex = list.PageIndex + 1;
        }
        list.loading = false;
        this.$set(this.result, index, list);
      },
      onScan() {
        // #ifdef H5
        let res = {
          result: "https://lineapi.yzsheng.com/pages_commodity?id=wc2400197&type=existingOrder",
        };
        let urlParam = getUrlParam(res.result);
        if (urlParam.type === "existingOrder") {
          this.$store.commit("purchaseChannel", true);
          uni.navigateTo({
            url: `/pages_commodity/selfWash/existingOrder?id=${urlParam.id}`,
          });
        } else {
          uni.showToast({
            icon: "none",
            title: "二维码有误",
          });
        }
        return false;
        // #endif
        if (uni.getStorageSync("token")) {
          uni.scanCode({
            success: async (res) => {
              // 确定是洗车二维码
              if (
                res.result.indexOf("pages_commodity") > -1 &&
                res.result.indexOf("type=existingOrder") > -1
              ) {
                // url携带过来的参数
                let urlParam = getUrlParam(res.result);
                // 根据接口判断当前是否有订单
                let isWashing = false
                uni.showLoading({
                  title: '加载中'
                })
                this.$api.selfServiceCarWash.getCheckMyInProgressOrder().then(async res => {
                  uni.hideLoading()
                  if (res.code === 200 && res.data && res.data.selfServiceCarWashOrder) {
                    isWashing = true
                  }
                  // 已有正在进行的洗车订单：
                  if (isWashing) {
                    // 1、扫自己当前用的机器就直接跳转洗车页面
                    if(urlParam.id === this.washMachineId){
                      this.orderDetial()
                    // 2、扫其他机器的二维码,弹窗提示已有订单,是否结束，是：结束该订单 否：回到订单洗车页
                    }else{
                      this.showOrderModal = true;
                    }
                  // 没有洗车订单就判断洗车机是否可用
                  } else {
                    try {
                      // 判断洗车机是否可用
                      let result =
                        await this.$api.selfServiceCarWash.CheckMachineAndOrder({
                          wash_Machine_Id: urlParam.id,
                        });
                      // 机器可用
                      if (result.data.isAvailable) {
                        this.scanSuccess(res);
                      // 机器不可用，弹窗提示
                      } else {
                        this.descObj.content = result.data.returnMessage;
                        this.descObj.show = true;
                      }
                    } catch (e) {
                      //TODO handle the exception
                    }
                  }
                }).catch((err)=>{
                  console.log(err)
                  uni.hideLoading()
                })
              } else {
                this.$u.toast("二维码有误");
              }
            },
          });
        } else {
          uni.navigateTo({
            url: "/pages_logins/login/login?mode=selfwash",
          });
        }
      },
      async scanSuccess(res) {
        try {
          let urlParam = getUrlParam(res.result);
          if (urlParam.type === "existingOrder") {
            this.$store.commit("purchaseChannel", true);
            uni.navigateTo({
              url: `/pages_commodity/selfWash/existingOrder?id=${urlParam.id}`,
            });
          } else {
            uni.showToast({
              icon: "none",
              title: "二维码有误",
            });
          }
        } catch (e) {
          //TODO handle the exception
        }
      },
      onClickCardDetails(res) {
        uni.navigateTo({
          url: `/pages_userModule/myCoupon/autoWashDetails?id=${res.id}`,
        });
      },

      // 查询是否有进行中的洗车单
      hasWashingOrder() {
        this.$api.selfServiceCarWash
          .getCheckMyInProgressOrder()
          .then((res) => {
            if (
              res.code === 200 &&
              res.data &&
              res.data.selfServiceCarWashOrder
            ) {
              this.isWashing = true;
              this.washCardId =
                res.data.selfServiceCarWashOrder.self_Service_Car_Wash_Card_Order_Id;
              this.washMachineId =
                res.data.selfServiceCarWashOrder.wash_Machine_Id;
              this.diffTime = dayjs(dayjs()).diff(
                dayjs(res.data.selfServiceCarWashOrder.use_Start_Time),
                "second"
              );
              this.washTimer = setInterval(() => {
                this.diffTime++;
                if (this.diffTime < 3601) {
                  const min =
                    parseInt(this.diffTime / 60) > 9 ?
                    parseInt(this.diffTime / 60) :
                    "0" + parseInt(this.diffTime / 60);
                  const secend =
                    this.diffTime % 60 > 9 ?
                    this.diffTime % 60 :
                    "0" + (this.diffTime % 60);
                  this.washingTime = min + ":" + secend;
                } else {
                  this.washingTime = "";
                  clearInterval(this.washTimer);
                }
              }, 1000);
            } else {
              this.isWashing = false;
              if (this.washTimer) {
                this.washingTime = "";
                clearInterval(this.washTimer);
              }
            }
          })
          .catch(() => {
            this.isWashing = false;
            if (this.washTimer) {
              this.washingTime = "";
              clearInterval(this.washTimer);
            }
          });
      },

      //跳转洗车订单详情
      orderDetial() {
        uni.navigateTo({
          url: "/pages_commodity/selfWash/index?cardId=" +
            this.washCardId +
            "&machineId=" +
            this.washMachineId,
        });
      },
    },
    // 结束洗车订单
    async setSailJiesuan() {
      try {
        uni.showLoading({
          title: "结束中...",
        });
        let res = await this.$api.selfServiceCarWash.SetSailJiesuan({
          wash_Machine_Id: this.washMachineId,
        });
        uni.hideLoading();
        if (res && res.code === 200 && res.data.result === "success") {
          uni.showToast({
            icon: "none",
            title: "结束成功",
          });
          this.isWashing = false;
          clearInterval(this.washTimer);
        } else {
          uni.showToast({
            icon: "none",
            title: res.msg,
          });
        }
      } catch (e) {
        uni.hideLoading();
        uni.showToast({
          icon: "none",
          title: e.msg,
        });
      }
    },
    onPullDownRefresh() {
      this.getCityId(() => {
        Promise.all([
          this.getHasBeenToCarWashStationList(true),
          this.getSelfServiceCarWashStationList(true),
        ]).then((data) => {
          if (data[0].code === 200 && data[0].data.list.length > 0) {
            this.tabs = [{
                name: "我去过的",
              },
              {
                name: "离我最近的",
              },
            ];
            this.addData(data[0], 0, true);
          } else {
            this.tabs = [{
              name: "离我最近的",
            }, ];
          }
          if (data[1].code === 200) {
            this.addData(data[1], 1, true);
            uni.stopPullDownRefresh();
          }
          // console.log(data)
        });
      });
    },
  };
</script>

<style lang="scss">
  page {
    background-color: #f1f1f1;
    height: 100%;
  }

  .self-wash {
    .already-existing {
      height: 78rpx;
      background-color: #fff;
      padding: 0 30rpx;
      display: flex;
      align-items: center;
      font-size: 26rpx;
      color: #333;
      margin-bottom: 16rpx;

      .icon {
        width: 38rpx;
        height: 38rpx;
        margin-right: 15rpx;
        margin-top: -4px;
      }

      .icon-arrow {
        margin-left: 24rpx;
        margin-top: -1px;
      }
    }

    .content {
      background-color: #fff;
      padding: 0 30rpx;

      .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 25rpx 0;
        border-bottom: 1px solid #eee;

        .left {
          display: flex;
          align-items: center;

          .text {
            margin-left: 20rpx;

            .title {
              font-size: 40rpx;
              color: #333;
            }

            .desc {
              font-size: 24rpx;
              color: #999;
              margin-top: 10rpx;
            }
          }
        }

        .img {
          width: 150rpx;
          height: 170rpx;
        }
      }

      .bottom {
        height: 124rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .btn {
          width: 320rpx;
          height: 78rpx;
          border-radius: 10rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 32rpx;
          font-weight: bold;
          color: #fff;
          background-color: #17ca52;

          &.last {
            background-color: #fbd321;
            color: #3d3d3d;
          }
        }
      }
    }

    .tab {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .left {
        width: 340rpx;
        // flex: 0.6;
        // background-color: red;
      }

      .one {
        width: 180rpx;
      }

      .two {
        flex: 0.6;
      }

      .right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        font-size: 22rpx;
        color: #666;
        margin-right: 30rpx;

        text {
          margin-right: 10rpx;
        }
      }
    }

    .list-box {
      flex: 1;
      overflow: hidden;
      margin-top: 12rpx;

      .swiper,
      .swiper-item {
        height: 100%;
      }
    }

    .loading-status {
      padding: 30rpx 0 40rpx;
    }
  }

  .new {
    position: fixed;
    top: 55rpx;
    color: #ffffff;
    z-index: 1001;
    width: 100%;
    text-align: center;
    margin-top: 150rpx;
  }

  .ljly {
    width: 260rpx;
    height: 70rpx;
    background: linear-gradient(0deg, #fdd421, #ffe23e);
    border-radius: 35rpx;
    margin: 72rpx auto;
    line-height: 70rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
  }

  // 遮罩层
  .mask {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    background: rgba($color: #000000, $alpha: 0.5);
    z-index: 1000;
    transition: all 0.4s;

    &.mask-hide {
      visibility: hidden;
      opacity: 0;
    }

    &.mask-show {
      visibility: visible;
      opacity: 1;
    }
  }

  .balloon {
    background: url("https://files.yzsheng.com/client/imgs/xiche.png") top center no-repeat;
    background-size: 100%;
    width: 136rpx;
    height: 156rpx;
    text-align: center;
    position: fixed;
    top: 870rpx;
    right: 0;
    padding-top: 15rpx;
    text-align: center;
    font-size: 20rpx;
    font-weight: 500;
    color: #2a5082;

    .scale {
      transform: scale(0.8);
    }
  }
</style>
